<template>
  <van-nav-bar title="我的收藏" :fixed="true" left-arrow @click-left="$router.back()"/>
  <div v-if="collectData.length === 0" class="noCollect">
    <van-empty description="你还没有藏品喔">
      <van-button
      round
      type="primary"
      class="bottom-button"
      @click.stop="router.push('/')"
      >去逛逛</van-button>
    </van-empty>
  </div>
  <div class="orderItem"
    v-for="item in collectData"
    @click="router.push({name: 'detail',params:{id:item.goods.id}})"
    >
      <van-card
        :title="item.goods.title"
        :thumb="item.goods.cover_url"
        :desc="item.goods.description"
        tag="精品"
        >
        <template #price>
          <div>
            &yen;{{item.goods.price}}
          </div>
        </template>
        <template #bottom>
          <div>收藏日期：{{item.created_at}}</div>
        </template>
      </van-card>
      <div class="unCollect">
        <van-button plain type="primary" size="mini" @click.stop="handleUnCollect(item.goods.id)">取消收藏</van-button>
      </div>
    </div>
</template>
    
<script setup lang='ts'>
import { collect } from '@/api/goods';
import { myCollect } from '@/api/my';
import { Dialog, Toast } from 'vant';
import { onMounted, ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
  
  let router = useRouter()
  let route = useRoute()

  let page = ref<number>(1)
  let collectData = ref<any>({})
  // 获取全部收藏信息
  let getCollectData = async () => {
    let res = await myCollect(page.value)
    if(res.status === 200){
      collectData.value = res.data.data
    }else{
      Toast.fail("请求失败")
    }
  }
  // 取消收藏
  const handleUnCollect = async (id:number) => {
    Dialog.confirm({
      title: '是否取消收藏',
      message:'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
    })
      .then(async () => {
        let res = await collect(id)
        if(res.status === 204){
          Toast.success("成功取消收藏")
          getCollectData()
        }else{
          Toast.fail("出错咯")
        }
      })
      .catch(() => {
        // on cancel
      });
  }
  onMounted(() => {
    getCollectData()
  })
</script>
    
<style lang="less" scoped>
.noCollect {
  margin-top: 100px;
  .bottom-button {
    width: 160px;
    height: 40px;
  }
}
.orderItem {
  border-top: 1px solid #ff6a00;
  border-bottom: 1px solid #ff6a00;
  margin: 50px 0 10px;
  position: relative;
  .unCollect {
    position: absolute;
    right: 15px;
    top: 30%;
  }
  /deep/ .van-card {
    margin-top: 0;
    .van-card__thumb {
      margin-right: 30px;
    }
    .van-card__content {
      justify-content: flex-start;
      .van-card__title {
        font-size: 14px;
        font-weight: 700;
        margin-top: 5px;
      }
      .van-card__desc {
        margin: 10px 5px;
        font-size: 12px;
      }
      .van-card__bottom {
        .van-card__price {
          font-size: 17px;
          color: #ff6a00;
          margin-left: 5px;
        }
        .van-card__num {
          font-size: 15px;
        }
      }
    }
  }
}
</style>